<template>
  <view class="question-wrapper">
    <view class="tab-content">
      <view class="section-title">请选择一个智能体</view>
      <view
        v-for="agent in agents"
        :key="agent.type"
        class="practice-section"
        @tap="selectAgent(agent)"
      >
        <view class="section-title">{{ agent.label }}</view>
        <view class="section-description">点击进入与该智能体对话</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      agents: [
        { label: '错题分析', type: 'QUESTION_ANALYSIS' },
        { label: '英语助手', type: 'ENGLISH' },
        { label: '专业课助理', type: 'SUBJECT' },
        { label: '考研百科', type: 'WIKI' }
      ]
    };
  },
  onLoad() {
    const token = uni.getStorageSync('token');
    if (!token) {
      uni.redirectTo({ url: '/pages/login/index' });
      return;
    }
  },
  onShow() {
    const token = uni.getStorageSync('token');
    if (!token) {
      uni.redirectTo({ url: '/pages/login/index' });
    }
  },
  methods: {
    selectAgent(agent) {
      uni.navigateTo({
        url: `/pages/ai/historySelect?type=${agent.type}`
      });
    }
  }
}
</script>

<style>
.question-wrapper {
  background: linear-gradient(135deg, #aacffc 0%, #bbd0fb 50%, #b2ecf8 100%);
  padding-bottom: 50rpx;
  height: calc(100vh - 60rpx);
  overflow-y: auto;
}
.tab-content {
  padding: 30rpx;
}
.practice-section {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}
.section-title {
  font-size: 36rpx;
  color: #333333;
  font-weight: bold;
}
.section-description {
  font-size: 28rpx;
  color: #666666;
  margin-top: 10rpx;
}
</style>
